import { useContext, useState, useEffect } from 'react'
import style from '../../index.module.less'
import { loginContext } from '../../context'

// 这个组件动态过滤登录页 平台概况 操作指南 公告通知底部的文字
export default (props: any) => {
  const { loginRightConfig } = useContext(loginContext)
  const [info, setInfo] = useState<any>({})

  useEffect(() => {
    setInfo(loginRightConfig.loginInfo)
  }, [loginRightConfig.loginInfo])

  // 平台概况
  const pingtaigaikuangBox = (
    <div className={style.bottomCenterBottom}>
      <div style={{ color: '#3B4DAF' }} className={style.bottomFont}>
        <div dangerouslySetInnerHTML={{ __html: info.overview }} />
      </div>
    </div>
  )

  // 操作指南
  const caozuozhinanBox = (
    <div className={style.bottomCenterBottom1}>
      <div style={{ color: '#3B4DAF' }} className={style.bottomFont}>
        <div dangerouslySetInnerHTML={{ __html: info.operationGuide }} />
      </div>
    </div>
  )

  // 公告通知
  const gonggaotongzhi = (
    <div className={style.bottomCenterBottom2}>
      <div style={{ color: '#3B4DAF' }} className={style.bottomFont}>
        <div dangerouslySetInnerHTML={{ __html: info.announcement }} />
      </div>
    </div>
  )

  if (props.index === 0) {
    return pingtaigaikuangBox
  }
  if (props.index === 1) {
    return caozuozhinanBox
  }
  if (props.index === 2) {
    return gonggaotongzhi
  }
}
